// 引入react-simple-code-editor组件
import Editor from "react-simple-code-editor";
// 引入prismjs库中的highlight和languages模块
import { highlight, languages } from "prismjs";
// 引入React库
import React from "react";
// 引入antd库中的Tooltip组件
import { Modal, Tooltip } from "antd";
import { useStore } from "@/store";

type Iprops = {
  // fromOrigin="预览"
  slideListItem?: any;
  fromOrigin?: string;
};

// 判断什么语言;python、c、javascript、java
// 定义一个函数，用于检测代码的语言
const detectLanguage = (code) => {
  // 定义Python语言的正则表达式模式
  const pythonPatterns = [
    /^#!/, // 以#!开头的行
    /\bdef\b/, // 包含def关键字的行
    /\bprint\(/, // 包含print函数的行
    /\bimport\b.*\n/, // 包含import关键字的行
    /:\s*$/m, // 以冒号结尾的行
  ];
  // 定义C语言的正则表达式模式
  const cPatterns = [
    /#include/, // 包含#include关键字的行
    /int\s+main\s*\(/, // 包含int main函数的行
    /printf\s*\(/, // 包含printf函数的行
    /scanf\s*\(/, // 包含scanf函数的行
    /void\s+\w+\s*\(/, // 包含void函数的行
  ];
  // 定义JavaScript语言的正则表达式模式
  const jsPatterns = [
    /const\s+/, // 包含const关键字的行
    /let\s+/, // 包含let关键字的行
    /function\s+/, // 包含function关键字的行
    /=>/, // 包含箭头函数的行
    /console\.log/, // 包含console.log函数的行
  ];
  // 定义Java语言的正则表达式模式
  const javaPatterns = [
    /public\s+class\s+\w+/, // 包含public class关键字的行
    /public\s+static\s+void\s+main\s*\(/, // 包含public static void main函数的行
    /System\.out\.println/, // 包含System.out.println函数的行
    /System\.in\.read/, // 包含System.in.read函数的行
    /new\s+\w+\s*\(/, // 包含new关键字的行
  ];
  // 定义各个语言的得分
  let pythonScore = 0;
  let cScore = 0;
  let jsScore = 0;
  let javaScore = 0;
  // 遍历Java语言的正则表达式模式，如果匹配则得分加1
  javaPatterns.forEach((pattern) => {
    if (pattern.test(code)) javaScore++;
  });
  // 遍历Python语言的正则表达式模式，如果匹配则得分加1
  pythonPatterns.forEach((pattern) => {
    if (pattern.test(code)) pythonScore++;
  });
  // 遍历C语言的正则表达式模式，如果匹配则得分加1
  cPatterns.forEach((pattern) => {
    if (pattern.test(code)) cScore++;
  });
  // 遍历JavaScript语言的正则表达式模式，如果匹配则得分加1
  jsPatterns.forEach((pattern) => {
    if (pattern.test(code)) jsScore++;
  });
  // 根据得分判断代码的语言
  if (javaScore > cScore && javaScore > jsScore && javaScore > pythonScore)
    return "Java";
  // 根据得分判断代码的语言
  if (pythonScore > cScore && pythonScore > jsScore) return "Python";
  // 根据得分判断代码的语言
  if (cScore > pythonScore && cScore > jsScore) return "C";
  return "JavaScript";
};

export const CommonPPT: React.FC<Iprops> = ({
  slideListItem,
  fromOrigin = "",
}) => {
  const { powerPointArr, modifyPowerPoint } = useStore();

  // 定义一个函数，用于处理双击事件
  const doubleClick = (typeItem, elementsIndex) => {
    // 触发自定义事件，传递参数type和elementsIndex
    document.dispatchEvent(
      new CustomEvent("passEvent", {
        detail: {
          type: typeItem,
          elementsIndex: elementsIndex,
        },
      })
    );
  };

  const deleteItemElement = (index) => {
    const elementsBro = [...slideListItem?.elements];
    elementsBro.splice(index, 1);
    const powerPointArrBro = [...powerPointArr];
    const indexFlag = powerPointArrBro.findIndex(
      (item) => item?.id === slideListItem?.id
    );
    if (indexFlag !== -1) {
      powerPointArrBro[indexFlag].elements.splice(index, 1);
    }
    modifyPowerPoint(powerPointArrBro);
    // // 删除指定索引的元素
    // slideListItem.elements.splice(index, 1);
    // // 更新slideListItem
    // setSlideListItem(slideListItem);
  };

  return (
    <>
      {slideListItem
        ? slideListItem?.elements?.map((item, index) => {
            // 文本
            if (item.type === "Text") {
              return (
                <div
                  onContextMenu={(e) => {
                    e.preventDefault();
                    Modal.confirm({
                      title: "确认删除",
                      content: "确定要删除该文本元素吗？",
                      okText: "确定",
                      cancelText: "取消",
                      onOk: () => {
                        deleteItemElement(index);
                      },
                    });
                  }}
                  // 双击事件
                  onDoubleClick={() => {
                    doubleClick("Text", index);
                  }}
                  // 设置唯一标识
                  key={item?.id}
                  // 设置样式
                  style={{
                    // 设置底部外边距
                    marginBottom: 16,
                    // 设置鼠标样式
                    cursor: "pointer",
                    // 设置边框样式
                    border: fromOrigin == "预览" ? "0" : "1px solid #e8e8e8",
                    // 设置字体颜色
                    color: item?.fontColor || "#000000",
                    // 设置字体大小
                    fontSize: `${item?.fontSize || 18}em`,
                    // 设置字体粗细
                    fontWeight: item?.fontWight || 800,
                    // 设置宽度
                    // 设置高度
                    // 设置溢出样式
                    overflow: "hidden",
                    fontFamily: item?.fontFamily || "auto",
                    position: "absolute",
                    width: `${item?.blockWidth || 100}%`,
                    height: `${item?.blockHeight || 250}%`,
                    left: `${item?.xAxis || 0}%`,
                    top: `${item?.yAxis || 0}%`,
                    // transform: "translate(-50%,-50%)",
                  }}
                >
                  {item?.content}
                </div>
              );
            }
            // 图片
            if (item.type === "Image") {
              return (
                <div
                  onContextMenu={(e) => {
                    e.preventDefault();
                    Modal.confirm({
                      title: "确认删除",
                      content: "确定要删除该图片元素吗？",
                      okText: "确定",
                      cancelText: "取消",
                      onOk: () => {
                        deleteItemElement(index);
                      },
                    });
                  }}
                  // 双击事件，调用doubleClick函数，参数为"Image"和index
                  onDoubleClick={() => {
                    doubleClick("Image", index);
                  }}
                  // 设置样式，底部外边距为16，鼠标指针为手型
                  style={{
                    marginBottom: 16,
                    cursor: "pointer",
                    position: "absolute",
                    width: `${item?.blockWidth || 100}%`,
                    height: `${item?.blockHeight || 250}%`,
                    left: `${item?.xAxis || 0}%`,
                    top: `${item?.yAxis || 0}%`,
                  }}
                  // 设置key值为item的id
                  key={item.id}
                >
                  <Tooltip title={item?.describe}>
                    <img
                      // 设置图片的宽度，如果item.blockWidth存在则使用item.blockWidth，否则使用500
                      style={{
                        width: "100%",
                        // 设置图片的高度，如果item.blockHeight存在则使用item.blockHeight，否则使用250
                        height: "100%",
                      }}
                      // 设置图片的src属性，使用item.imageUrl
                      src={item?.imageUrl}
                      // 设置图片的alt属性，使用item.describe
                      alt={item?.describe}
                    />
                  </Tooltip>
                </div>
              );
            }
            // 视频
            if (item.type === "Video") {
              return (
                <div
                  onContextMenu={(e) => {
                    e.preventDefault();
                    Modal.confirm({
                      title: "确认删除",
                      content: "确定要删除该视频元素吗？",
                      okText: "确定",
                      cancelText: "取消",
                      onOk: () => {
                        deleteItemElement(index);
                      },
                    });
                  }}
                  // 双击事件，调用doubleClick函数，参数为"Video"和index
                  onDoubleClick={() => {
                    doubleClick("Video", index);
                  }}
                  // 设置样式，底部外边距为16，鼠标指针为手型
                  style={{
                    marginBottom: 16,
                    cursor: "pointer",
                    position: "absolute",
                    width: `${item?.blockWidth || 100}%`,
                    height: `${item?.blockHeight || 50}%`,
                    left: `${item?.xAxis || 0}%`,
                    top: `${item?.yAxis || 0}%`,
                  }}
                  // 设置key值，为item的videoUrl或id
                  key={item?.videoUrl || item.id}
                >
                  <video
                    style={{
                      // 设置边框样式为1像素的实线，颜色为#e8e8e8
                      border: "1px solid #e8e8e8",
                      // 设置垂直对齐方式为居中
                      verticalAlign: "middle",
                      // 设置图片的填充方式为填充
                      objectFit: "fill",
                    }}
                    // 设置宽度为item的blockWidth属性，如果不存在则默认为500
                    width="100%"
                    // 设置高度为item的blockHeight属性，如果不存在则默认为250
                    height="100%"
                    // 显示控制条
                    controls
                    // 阻止默认的双击全屏行为
                    controlsList="nofullscreen"
                  >
                    <source src={item?.videoUrl || 250} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>
                </div>
              );
            }
            // 代码
            if (item.type === "Code") {
              return (
                <div
                  onContextMenu={(e) => {
                    e.preventDefault();
                    Modal.confirm({
                      title: "确认删除",
                      content: "确定要删除该代码元素吗？",
                      okText: "确定",
                      cancelText: "取消",
                      onOk: () => {
                        deleteItemElement(index);
                      },
                    });
                  }}
                  // 双击事件，调用doubleClick函数，传入参数"Code"和index
                  onDoubleClick={() => {
                    doubleClick("Code", index);
                  }}
                  // 设置样式，底部间距为16，鼠标悬停时显示手型
                  style={{
                    marginBottom: 16,
                    cursor: "pointer",
                    position: "absolute",
                    width: `${item?.blockWidth || 100}%`,
                    height: `${item?.blockHeight || 50}%`,
                    left: `${item?.xAxis || 0}%`,
                    top: `${item?.yAxis || 0}%`,
                  }}
                  // 设置key值，用于React的diff算法
                  key={item.id}
                >
                  <div
                    style={{
                      // 设置宽度为500px
                      width: "100%",
                      // 设置高度为250
                      height: "100%",
                      // 设置溢出内容隐藏
                      overflow: "hidden",
                      // 设置边框为1px实线，颜色为#e8e8e8
                      // 设置边框样式
                      border: fromOrigin == "预览" ? "0" : "1px solid #e8e8e8",
                      // 设置背景颜色，根据detectLanguage函数的返回值判断
                      backgroundColor:
                        // 如果detectLanguage函数返回值为Python，则背景颜色为#eef6ff
                        detectLanguage(item?.content) === "Python"
                          ? "#eef6ff"
                          : // 如果detectLanguage函数返回值为JavaScript，则背景颜色为#fefce8
                          detectLanguage(item?.content) === "JavaScript"
                          ? "#fefce8"
                          : // 否则背景颜色为#fbf5ff
                            "#fbf5ff",
                    }}
                  >
                    <div
                      style={{
                        // 设置宽度为100%
                        width: "100%",
                        // 设置高度为40px
                        height: 40,
                        // 设置内边距为0 16px
                        padding: "0 16px",
                        // 设置行高为38px
                        lineHeight: "38px",
                        // 设置底部边框为1px solid #e8e8e8
                        borderBottom: "1px solid #e8e8e8",
                      }}
                    >
                      {detectLanguage(item?.content)}
                    </div>
                    <Editor
                      value={item?.content} // 设置代码块的内容
                      highlight={
                        (code) => highlight(code, languages.js, "javascript") // 使用highlight函数高亮代码
                      }
                      padding={4} // 设置代码块的padding
                      style={{
                        display: "block", // 设置代码块的display属性为block
                        width: "100%", // 设置代码块的宽度为100%
                        height: "100%", // 设置代码块的高度为100%
                        overflow: "hidden", // 设置代码块的overflow属性为hidden
                        border: "0px", // 设置代码块的border属性为0px
                        fontFamily: '"Fira code", "Fira Mono", monospace', // 设置代码块的字体为Fira code, Fira Mono, monospace
                        fontSize: item?.fontSize * 16 || 12, // 设置代码块的字体大小为item?.fontSize * 16，如果item?.fontSize不存在，则设置为12
                      }}
                      readOnly // 设置代码块为只读
                    />
                  </div>
                </div>
              );
            }
            return null;
          })
        : null}
    </>
  );
};
